'use client'

import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarGroup,
    SidebarGroupContent,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarTrigger,
} from "@/components/ui/sidebar"
import Link from "next/link"
import {ModeToggle} from "@/components/mode-toggle"
import {NavUser} from "@/components/nav-user"
import {Combine, Dock, Home, Settings} from "lucide-react";
import {useEffect, useState} from "react";
import request from "@/lib/request";

interface UserInfoType extends ApiResponse {
    data: {
        name: string;
        email: string;
        avatar: string;
    }
}

const menu = [
    {
        title: "Home",
        url: "/",
        icon: Home,
    },
    {
        title: "Project",
        url: "/project",
        icon: Dock,
    },
    {
        title: "Automation",
        url: "/automation",
        icon: Combine,
    },
    {
        title: "Settings",
        url: "/settings",
        icon: Settings,
    },
]


export function AppSidebar() {
    const [userInfo, setUserInfo] = useState({} as {
        name: string;
        email: string;
        avatar: string;
    });

    useEffect(() => {
        request("/api/user/get", {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
            }
        }).then((res: UserInfoType) => {
            setUserInfo(res.data);
        })
    }, []);

    return (
        <Sidebar collapsible="icon">
            <SidebarHeader>
                {userInfo ? <NavUser user={userInfo}/> : <></>}
            </SidebarHeader>
            <SidebarContent>
                <SidebarGroup>
                    <SidebarGroupContent>
                        <SidebarMenu>
                            {menu.map((item) => (
                                <SidebarMenuItem key={item.title}>
                                    <SidebarMenuButton asChild>
                                        <Link href={item.url}>
                                            <item.icon/>
                                            <span>{item.title}</span>
                                        </Link>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                            ))}
                        </SidebarMenu>
                    </SidebarGroupContent>
                </SidebarGroup>
            </SidebarContent>
            <SidebarFooter>
                <ModeToggle/>
                <SidebarTrigger/>
            </SidebarFooter>
        </Sidebar>
    )
}
